<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>进度条</title>
        <style>
            html,
            body {
                margin: 0;
            }

            #canvas {
                display: block;
                margin: auto;
                border: 1px solid #e9e9e9;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
        <script type="module">
            import {Create} from '../dist/main.js';
            const canvas = new Create('canvas', {
                background: '#fff'
            });

            const ctx = canvas.ctx;

            function drawBackground() {
                canvas.drawCircle({x: 400, y: 400}, 200, {
                    lineWidth: 15,
                    strokeColor: 'grey'
                });
            }

            let ratio = 0;

            function drawText() {
                const number = ((ratio / 360) * 100).toFixed(0);
                canvas.drawText(`${number}%`, 400, 400, {
                    fontSize: '40px',
                    color: 'green'
                });
            }

            function drawCircle() {
                ctx.save();
                ctx.beginPath();
                ctx.translate(400, 400);
                ctx.rotate((-90 * Math.PI) / 180);
                ctx.lineWidth = 15;
                ctx.lineCap = 'round';
                ctx.strokeStyle = 'green';
                ctx.arc(0, 0, 200, 0, (ratio * Math.PI) / 180);
                ctx.stroke();
                ctx.restore();

                if (ratio === 360) {
                    ratio = 0;
                } else {
                    ratio++;
                }
            }

            function initCanvas() {
                canvas.clearRect(0, 0, 800, 800);
                drawBackground();
                drawText();
                drawCircle();

                // 重新绘制
                requestAnimationFrame(initCanvas);
            }

            initCanvas();
        </script>
    </body>
</html>
